import "./index.css";
import { themeStore } from "@/common/store/index";
const { getters } = themeStore();

const HotList = [
  {
    id: 1,
    title: "XC 是什么？",
  },
  {
    id: 2,
    title: "XC 如何使用？",
  },
  {
    id: 3,
    title: "XC 怎么完成的",
  },
  {
    id: 4,
    title: "XC 的优势",
  },
];

const useList = [
  {
    id: 1,
    title: "问答",
    detail: "今天中午吃什么",
  },
  {
    id: 2,
    title: "翻译",
    detail: "How are you && I'm fine",
  },
  {
    id: 3,
    title: "姻缘",
    detail: "月老谢超在线搭桥",
  },
  {
    id: 4,
    title: "编程",
    detail: "重生之我在开发大模型",
  },
];

const HomeTitle = () => {
  const style = {
    color: getters.getTextColor()[getters.getTheme()],
  };
  return (
    <div className="home-title">
      <img
        src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
        className="moving-image"
      />
      <div className="introduce" style={style}>
        <div className="introduce-welcome">欢迎使用 XC 对话模型</div>
        <div className="introduce-detail">基于阿里系完成的AI能力和界面工具</div>
      </div>
    </div>
  );
};

const HomeCardHot = ({ colorStyle }) => {
  return (
    <div className="home-card" style={colorStyle}>
      <div>
        <div className="card-title">热门话题</div>
        <div className="card-detail">快捷查看热门话题</div>
      </div>
      <div className="hot-list">
        {HotList.map((item, index) => (
          <div key={item.id} className="hot-item">
            <span className="index-number">{index + 1}</span>
            <span>{item.title}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

const HomeCardGuide = ({ colorStyle }) => {
  const guideStyle = {
    color: getters.getTextColor()[getters.getTheme()],
    background: getters.getGuideBgColor()[getters.getTheme()],
  };
  return (
    <div className="home-card" style={colorStyle}>
      <div>
        <div className="card-title">XC 使用指南</div>
        <div className="card-detail">AI 时代下的使用新范式</div>
      </div>
      <div className="guide-list">
        {useList.map((item) => (
          <div key={item.id} className="guide-item" style={guideStyle}>
            <span className="guide-item-title">{item.title}</span>
            <span>{item.detail}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

const HomeContent = () => {
  const style = {
    color: getters.getTextColor()[getters.getTheme()],
    background: getters.getHomeCardBgColor()[getters.getTheme()],
  };
  return (
    <div className="home-content">
      <HomeCardHot colorStyle={style} />
      <HomeCardGuide colorStyle={style} />
    </div>
  );
};

const HomePage = () => {
  return (
    <div className="home-page">
      <HomeTitle />
      <HomeContent />
    </div>
  );
};

export default HomePage;
